<template>
  <div class="content">
    <div class="row-bg-query">
      <div><el-button type="primary" size="small" icon="el-icon-edit" @click="handleCreate">发表说说</el-button></div>
    </div>
    <el-timeline>
      <el-timeline-item v-for="item in topics" :key="item.id" :timestamp="item.createTime" placement="top">
        <el-card>
          <h4>锐哦哦发了一条说说</h4>
          <p>{{ item.content }}</p>
        </el-card>
      </el-timeline-item>
      <div v-if="isLoading" v-loading="true" class="loading" />
    </el-timeline>
  </div>
</template>

<script>
import { getList, addOrUpdate } from '@/api/topic'

export default {
  data() {
    return {
      loading: false,
      isLoading: true,
      params: {
        current: 1,
        size: 10
      },
      topics: [],
      page: {
        current: 1,
        size: 10,
        total: 0,
        pages: 0
      }
    }
  },
  created() {
    this.fetchData(0)
  },
  mounted() {
    window.addEventListener('scroll', this.handleScroll)
  },
  destroyed() {
    //  离开页面清除（移除）滚轮滚动事件
    window.removeEventListener('scroll', this.handleScroll)
  },
  methods: {
    // 获取说说列表
    fetchData(type) {
      this.loading = !this.isLoading
      getList(this.params).then(response => {
        if (response.code === 200) {
          if (type === 1) {
            response.data.records.forEach(item => {
              this.topics.push(item)
            })
          } else {
            this.topics = response.data.records
          }
          this.page.current = response.data.current
          this.page.size = response.data.current
          this.page.total = response.data.total
          this.page.pages = response.data.pages
        } else {
          this.$message({
            type: 'error',
            message: response.message
          })
        }
        this.loading = false
        this.isLoading = false
      })
    },
    handleScroll() {
      // 距离顶部的距离
      const scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
      // 可视区的高度
      var windowHeight = document.documentElement.clientHeight || document.body.clientHeight
      // 滚动条的总高度
      var scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight
      // 滚动条到底部的条件
      if (scrollTop + windowHeight === scrollHeight) {
        if (this.params.current < this.page.pages) {
          this.isLoading = true
          this.params.current += 1
          this.fetchData(1)
        }
      }
    },
    // 发表说说
    handleCreate() {
      this.$prompt('内容', '发表说说', {
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      }).then(({ value }) => {
        addOrUpdate({ content: value }).then(response => {
          if (response.code === 200) {
            this.params.current = 1
            this.fetchData(0)
            this.$message({
              type: 'success',
              message: '发表说说成功，每天都要保持好心情哦'
            })
          } else {
            this.$message({
              type: 'error',
              message: response.message
            })
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '取消发表'
        })
      })
    }
  }
}
</script>

<style lang="scss" scoped>
  .content {
    padding: 20px;

    .row-bg-query {
      display: flex;
      flex-wrap: wrap;
      justify-content: flex-end;
    }

    .loading {
      display: flex;
      justify-content: center;
      margin-top: 20px;
      margin-bottom: 20px;
    }
  }
</style>
